<template>
	<view>
		<view class="wrap">
			<template v-if="options.action==='pending'">
				<view class="order" v-for="(res, index) in orders" :key="res.id">
					<view class="top">
						<view class="left">
							<u-icon name="order" :size="30" color="rgb(94,94,94)"></u-icon>
							<view class="store">{{ res.serial_code }}</view>
							<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
						</view>
						<view class="right">{{ stateDesc(res) }}</view>
					</view>
					<u-line></u-line>
					<view class="u-p-t-30 p-t-b-30">
						<view v-for="item in res.goods_list"><view><u-icon name="grid-fill" :size="36" style="margin-right:.5em;"></u-icon> {{item.item_name}} x{{item.quantity}}</view></view>
						<view>收货人：{{res.addr_name}} {{res.addr_phone}}</view>
						<view>顾客备注：{{res.user_remark?res.user_remark:'无备注'}} </view>
						<!-- <view>收货地址：{{res.addr_district}} {{res.addr_street}}</view> -->
						<view>发货员：{{res.delivery_company}} {{res.delivery_trace_code}}</view>
					</view>

					<u-line class="u-p-t-20"></u-line>
					<view class="bottom">
						<view class="u-flex-1">
							共{{ totalNum(res.goods_list) }}件商品 合计:
							<text class="total-price">
								￥{{ res.paid_amount }}</text>
							</text>
						</view>
						<!-- <view class="logistics btn u-flex" @click="completeDelivery(res.id)">
							<u-avatar :src="user.avatar" size="50" style="display: flex; margin-right: .5em;">
							</u-avatar>
							确认送达
						</view> -->
					</view>
				</view>
			</template>

			<template v-if="paging.delivery_state==='pending_pickup'">
				<view class="order" v-for="(res, index) in orders" :key="res.id">
					<view class="top">
						<view class="left">
							<u-icon name="order" :size="30" color="rgb(94,94,94)"></u-icon>
							<view class="store">{{ res.serial_code }}</view>
							<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
						</view>
						<view class="right">{{ stateDesc(res) }}</view>
					</view>
					<u-line></u-line>
					<view class="u-p-t-30 p-t-b-30">
						<view>顾客备注：{{res.user_remark?res.user_remark:'无备注'}} </view>
						<!-- <view>提货码：{{res.pickup_code}}</view> -->
					</view>

					<u-line class="u-p-t-20"></u-line>
					<view class="bottom">
						<view class="u-flex-1">
							共{{ totalNum(res.goods_list) }}件商品 合计:
							<text class="total-price">
								￥{{ res.paid_amount }}</text>
							</text>
						</view>
						<view class="logistics btn u-flex" @click="goPickup(res.pickup_code)">
							<u-avatar :src="user.avatar" size="50" style="display: flex; margin-right: .5em;">
							</u-avatar>
							确认提货
						</view>
					</view>
				</view>
			</template>


			<u-loadmore bg-color="#fff" class="u-padding-30" :status="loadStatus" @loadmore="loadMore"
				:load-text="loadText" v-if="logs.length>0"></u-loadmore>
			<u-back-top :scroll-top="scrollTop"></u-back-top>

		</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				logs: [{
					id: 1,
					created: '08-29 12:00',
					desc: '分红收入',
					change: 13.00
				}],
				user: {},
				paging: {
					state: 'paid',
					// delivery_state: 'pending_receive',
					current_page: 1,
					total_pages: 1,
					page_zie: 100,
					require_goods: 1
				},
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				shop: {},
				orders: [],
				options:{}
			}
		},
		onLoad(options) {
			this.options = options
			console.log(options)
			if (options.action === 'sending') {
				// this.paging.delivery_state = 'pending_receive'
			}
			if (options.action === 'pending') {
				// this.paging.delivery_state = 'pending_pickup'
			}
			this.getShop()
		},
		onShow() {
			this.getUserInfo();
			this.getOrders();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.paging.current_page >= this.paging.total_pages) {
				this.loadStatus = 'nomore';
				return;
			}
			this.loadStatus = 'loading';
			this.paging.current_page = ++this.paging.current_page;
			this.getOrders()
		},
		methods: {
			openPage() {

			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.quantity;
				});
				return num;
			},
			stateDesc(payment) {
				if (payment.state === 'pending_pay') {
					return '待支付'
				}
				if (payment.state === 'paid') {
					if (payment.delivery_state === 'complete') {
						return '已完成'
					}
					if (payment.delivery_state === 'store_handling') {
						return '商家捡货中'
					}
					if (payment.delivery_state === 'pending_receive') {
						return '商家配送中'
					}
					if (payment.delivery_state === 'pending_pickup') {
						return '待自提'
					}
					return '';
				}
				if (payment.state === 'pending_refund') {
					return '退款处理中';
				}
				if (payment.state === 'refunded') {
					return '已退款';
				}
				if (payment.state === 'expired') {
					return '订单已失效';
				}
			},
			getOrders() {
				this.$u.post('/store-manage/store-delivery-list', this.paging).then(res => {
					if (res.page.current_page === 1) {
						this.orders = res.list;
					} else {
						this.orders = this.orders.concat(res.list);
					}
					this.paging.current_page = res.page.current_page;
					this.paging.total_pages = res.page.total_pages;
					this.paging.page_size = res.data.page_size;
				}).catch(e => {})
			},
			completeDelivery(paymentId) {
				this.$u.post('/admin/delivery/complete-delivery', {
					payment_id: paymentId
				}).then(res => {
					uni.showToast({
						title: '订单送达',
						icon: 'success'
					});
					// TODO 去除确认送达按钮
					this.paging.current_page = 1;
					this.getOrders();
				}).catch(e => {
					console.log(e)
				})
			},
			goPickup(pickupCode) {
				this.$u.route({
					type: 'to',
					params: {
						pickup_code: pickupCode
					},
					url: '/pages/ucp/store-manage/order-ucp-confirm',
					animationType: 'slide-in-bottom'
				});
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			loadMore() {
				console.log('load more')
				if (this.paging.current_page < this.paging.total_pages) {
					this.paging.current_page = this.paging.current_page + 1;
					this.getOrders();
				}
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
			padding-bottom: 30rpx;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 100%;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 190rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				margin-left: 26rpx;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
</style>
